<template>
  <div class="goodsdetial">
    <van-nav-bar title="传智播客-黑马程序员" left-text="返回" left-arrow @click-left="$router.back()" />
    <div class="photo">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="v in goodsDetial" :key="v.src">
          <img :src="v.src" style="width:80%" />
        </van-swipe-item>
      </van-swipe>
    </div>
    <div class="content">
      <h2>{{info.title}}</h2>
      <div class="price">
        <span>市场价：￥{{info.market_price}}</span>&nbsp;&nbsp;&nbsp;
        <span>
          爆款价：
          <i>￥{{info.sell_price}}</i>
        </span>
      </div>
      <div class="count">
        购买数量：
        <van-stepper v-model="info.count" integer :show-plus="true" />
      </div>
      <div class="button">
        <van-button type="info">立即购买</van-button>&nbsp;&nbsp;
        <van-button type="danger" @click="addcarts">加入购物车</van-button>
      </div>
    </div>
    <div class="parameter">
      <h2>商品参数</h2>
      <p>商品编号：{{info.goods_no}}</p>
      <p>库存情况：{{info.stock_quantity}}</p>
      <p>上架时间：{{info.add_time}}</p>
    </div>
    <div class="foot">
      <van-button plain type="primary" @click="$router.push({path:`/goodsDesc/${info.id}`})">图文介绍</van-button>
      <van-button plain type="danger" @click="$router.push({path:`/goodsComment/${info.id}`})">商品评论</van-button>
    </div>
  </div>
</template>

<script>
import moment from "moment";
import { photo, getinfo } from "@/apis/goods.js";
export default {
  data() {
    return {
      goodsDetial: [],
      info: [],
      carts: [],
    };
  },
  async mounted() {
    let res1 = await photo(this.$route.params.id);
    this.goodsDetial = res1.data.message;
    let res2 = await getinfo(this.$route.params.id);
    this.info = res2.data.message[0];
    this.info.count = 1;

    this.info.add_time = moment(this.info.add_time).format(
      "YYYY-MM-DD hh:mm:ss"
    );
    console.log(this.info);
    // 拿本地购物车数据
    let cart = localStorage.getItem("carts");
    if (cart) {
      this.carts = JSON.parse(cart);
    }
  },
  methods: {
    addcarts() {
      let repetition = false;
      this.carts.map((v) => {
        // 判断是否已经存有此商品
        if (v.id == this.info.id) {
          v.count = v.count + this.info.count;
          repetition = true;
        }
      });
      if (!repetition) {
        this.carts.push(this.info);
      }
      localStorage.setItem("carts", JSON.stringify(this.carts));
      this.$toast.success("成功加入购物车");
    },
  },
};
</script>
<style lang="less" scoped>
.goodsdetial {
  margin-bottom: 60px;
}
.photo,
.content,
.parameter,
.foot {
  margin: 8px;
  box-shadow: 0 0 2px 2px #eee;
  padding: 10px 20px;
}
.photo {
  text-align: center;
}
.content {
  h2 {
    margin: 8px;
    padding: 8px 0;
    border-bottom: 1px solid #ccc;
    font-size: 20px;
    color: rgb(32, 155, 236);
  }
  span {
    font-size: 16px;
    i {
      font-size: 20px;
      color: red;
      font-style: normal;
    }
  }
  .price,
  .button,
  .count {
    margin: 18px;
  }
  .van-stepper {
    display: inline-block;
    width: 200px;
    height: 30px;
    /deep/ button {
      width: 40px;
      height: 30px;
    }
    /deep/ input {
      width: 50px;
      height: 30px;
    }
  }
}
.parameter {
  height: 220px;
  h2 {
    margin: 8px;
    border-bottom: 1px solid #ccc;
    font-size: 20px;
    font-weight: 400;
    padding: 8px 0;
  }
  p {
    padding: 10px 30px;
  }
}
.foot {
  button {
    width: 100%;
    margin-bottom: 8px;
    font-size: 20px;
  }
}
</style>